<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟考试 - 护工助手</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/training.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3159099_1wqzwg0e9ck.css">
    <style>
        .exam-header {
            background-color: var(--bg-white);
            padding: var(--spacing-md);
            margin-bottom: var(--spacing-md);
        }
        
        .exam-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: var(--spacing-md);
        }
        
        .exam-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: var(--spacing-xs);
        }
        
        .exam-subtitle {
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .exam-timer {
            text-align: center;
            padding: var(--spacing-sm);
            background-color: var(--primary-light);
            border-radius: var(--radius-md);
            color: var(--primary-color);
            font-weight: 600;
            font-size: 16px;
        }
        
        .exam-stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: var(--spacing-md);
        }
        
        .stat-item {
            text-align: center;
            flex: 1;
        }
        
        .stat-value {
            font-size: 20px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        
        .stat-label {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .progress-bar {
            height: 6px;
            background-color: var(--bg-light);
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background-color: var(--primary-color);
            border-radius: 3px;
        }
        
        .question-nav {
            background-color: var(--bg-white);
            padding: var(--spacing-md);
            margin-bottom: var(--spacing-md);
        }
        
        .nav-title {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: var(--spacing-sm);
        }
        
        .nav-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: var(--spacing-xs);
        }
        
        .nav-item {
            width: 100%;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-color);
            font-size: 14px;
            color: var(--text-primary);
            transition: all 0.2s;
        }
        
        .nav-item.current {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }
        
        .nav-item.answered {
            background-color: var(--primary-light);
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
        
        .nav-item.marked {
            background-color: var(--warning-light);
            border-color: var(--warning-color);
            color: var(--warning-color);
        }
        
        .question-container {
            background-color: var(--bg-white);
            padding: var(--spacing-md);
            margin-bottom: 60px;
        }
        
        .question-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: var(--spacing-md);
        }
        
        .question-number {
            font-size: 16px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .question-type {
            background-color: var(--primary-light);
            color: var(--primary-color);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }
        
        .question-content {
            font-size: 16px;
            line-height: 1.6;
            color: var(--text-primary);
            margin-bottom: var(--spacing-md);
        }
        
        .options-list {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
            margin-bottom: var(--spacing-lg);
        }
        
        .option-item {
            display: flex;
            padding: var(--spacing-md);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            transition: all 0.2s;
        }
        
        .option-item.selected {
            border-color: var(--primary-color);
            background-color: var(--primary-light);
        }
        
        .option-marker {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: var(--spacing-md);
            font-size: 14px;
            color: var(--text-secondary);
            flex-shrink: 0;
        }
        
        .option-item.selected .option-marker {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }
        
        .option-content {
            font-size: 14px;
            color: var(--text-primary);
        }
        
        .question-actions {
            display: flex;
            justify-content: space-between;
            margin-top: var(--spacing-lg);
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            padding: var(--spacing-xs) var(--spacing-md);
            border-radius: var(--radius-md);
            font-size: 14px;
            background-color: var(--bg-light);
            color: var(--text-secondary);
        }
        
        .action-btn i {
            margin-right: 4px;
        }
        
        .action-btn.marked {
            color: var(--warning-color);
        }
        
        .nav-buttons {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: var(--bg-white);
            display: flex;
            padding: var(--spacing-sm);
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            z-index: 100;
        }
        
        .nav-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--spacing-sm) 0;
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .nav-btn i {
            margin-right: 4px;
        }
        
        .nav-btn.primary {
            background-color: var(--primary-color);
            color: white;
            border-radius: var(--radius-md);
            margin: 0 var(--spacing-xs);
        }
        
        .exam-dialog {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        
        .exam-dialog.active {
            display: flex;
        }
        
        .dialog-content {
            width: 80%;
            max-width: 320px;
            background-color: var(--bg-white);
            border-radius: var(--radius-md);
            padding: var(--spacing-lg);
            text-align: center;
        }
        
        .dialog-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: var(--spacing-md);
        }
        
        .dialog-message {
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-secondary);
            margin-bottom: var(--spacing-lg);
        }
        
        .dialog-buttons {
            display: flex;
            justify-content: center;
            gap: var(--spacing-md);
        }
        
        .dialog-btn {
            padding: var(--spacing-sm) var(--spacing-lg);
            border-radius: var(--radius-md);
            font-size: 14px;
            font-weight: 500;
        }
        
        .dialog-btn.cancel {
            background-color: var(--bg-light);
            color: var(--text-secondary);
        }
        
        .dialog-btn.confirm {
            background-color: var(--primary-color);
            color: white;
        }
        
        .checkbox-item {
            display: flex;
            align-items: center;
            padding: var(--spacing-md);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            margin-bottom: var(--spacing-sm);
        }
        
        .checkbox-marker {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            border: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: var(--spacing-md);
            color: white;
            flex-shrink: 0;
        }
        
        .checkbox-item.selected .checkbox-marker {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .checkbox-content {
            font-size: 14px;
            color: var(--text-primary);
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 顶部状态栏 -->
        <header class="app-header">
            <div class="status-bar">
                <span class="time">14:25</span>
                <div class="status-icons">
                    <span class="icon-wifi"></span>
                    <span class="icon-signal"></span>
                    <span class="icon-battery">80%</span>
                </div>
            </div>
            <div class="header-content">
                <a href="question-bank.html" class="back-btn">
                    <i class="icon-back"></i>
                </a>
                <h1>模拟考试</h1>
                <div class="header-actions">
                    <a href="#" class="icon-more"></a>
                </div>
            </div>
        </header>

        <!-- 考试信息 -->
        <div class="exam-header">
            <div class="exam-info">
                <div>
                    <h2 class="exam-title">护工技能水平测试</h2>
                    <p class="exam-subtitle">满分100分 · 及格60分</p>
                </div>
                <div class="exam-timer" id="exam-timer">45:00</div>
            </div>
            <div class="exam-stats">
                <div class="stat-item">
                    <div class="stat-value">20</div>
                    <div class="stat-label">总题数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">8</div>
                    <div class="stat-label">已答题</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">3</div>
                    <div class="stat-label">标记题</div>
                </div>
            </div>
            <div class="progress-bar">
                <div class="progress-fill" style="width: 40%"></div>
            </div>
        </div>

        <!-- 题目导航 -->
        <div class="question-nav">
            <h3 class="nav-title">题目导航</h3>
            <div class="nav-grid">
                <div class="nav-item answered">1</div>
                <div class="nav-item answered">2</div>
                <div class="nav-item answered">3</div>
                <div class="nav-item marked">4</div>
                <div class="nav-item answered">5</div>
                <div class="nav-item answered">6</div>
                <div class="nav-item answered">7</div>
                <div class="nav-item answered">8</div>
                <div class="nav-item current">9</div>
                <div class="nav-item">10</div>
                <div class="nav-item marked">11</div>
                <div class="nav-item">12</div>
                <div class="nav-item">13</div>
                <div class="nav-item marked">14</div>
                <div class="nav-item">15</div>
                <div class="nav-item">16</div>
                <div class="nav-item">17</div>
                <div class="nav-item">18</div>
                <div class="nav-item">19</div>
                <div class="nav-item">20</div>
            </div>
        </div>

        <!-- 当前题目 -->
        <div class="question-container">
            <div class="question-header">
                <div class="question-number">第9题</div>
                <div class="question-type">单选题</div>
            </div>
            <div class="question-content">
                老年人血压测量时，以下哪种做法是正确的？
            </div>
            <div class="options-list">
                <div class="option-item">
                    <div class="option-marker">A</div>
                    <div class="option-content">测量前让患者剧烈活动，提高血压值</div>
                </div>
                <div class="option-item">
                    <div class="option-marker">B</div>
                    <div class="option-content">测量前让患者休息5-10分钟</div>
                </div>
                <div class="option-item">
                    <div class="option-marker">C</div>
                    <div class="option-content">测量时袖带松散缠绕</div>
                </div>
                <div class="option-item">
                    <div class="option-marker">D</div>
                    <div class="option-content">测量时手臂高于心脏水平</div>
                </div>
            </div>
            <div class="question-actions">
                <div class="action-btn" id="mark-btn">
                    <i class="icon-mark"></i>
                    <span>标记题目</span>
                </div>
            </div>
        </div>

        <!-- 多选题示例 -->
        <div class="question-container" style="display: none;">
            <div class="question-header">
                <div class="question-number">第11题</div>
                <div class="question-type">多选题</div>
            </div>
            <div class="question-content">
                以下哪些是老年人常见的心理问题？
            </div>
            <div class="options-list">
                <div class="checkbox-item">
                    <div class="checkbox-marker">✓</div>
                    <div class="checkbox-content">孤独感</div>
                </div>
                <div class="checkbox-item selected">
                    <div class="checkbox-marker">✓</div>
                    <div class="checkbox-content">抑郁情绪</div>
                </div>
                <div class="checkbox-item">
                    <div class="checkbox-marker">✓</div>
                    <div class="checkbox-content">焦虑症状</div>
                </div>
                <div class="checkbox-item selected">
                    <div class="checkbox-marker">✓</div>
                    <div class="checkbox-content">认知障碍</div>
                </div>
            </div>
            <div class="question-actions">
                <div class="action-btn marked" id="unmark-btn">
                    <i class="icon-marked"></i>
                    <span>取消标记</span>
                </div>
            </div>
        </div>

        <!-- 底部导航按钮 -->
        <div class="nav-buttons">
            <div class="nav-btn">
                <i class="icon-left"></i>
                <span>上一题</span>
            </div>
            <div class="nav-btn primary" id="next-btn">
                <i class="icon-next"></i>
                <span>下一题</span>
            </div>
            <div class="nav-btn" id="submit-btn">
                <i class="icon-submit"></i>
                <span>交卷</span>
            </div>
        </div>

        <!-- 交卷确认弹窗 -->
        <div class="exam-dialog" id="submit-dialog">
            <div class="dialog-content">
                <h3 class="dialog-title">确认交卷</h3>
                <p class="dialog-message">您还有12题未作答，确定要交卷吗？</p>
                <div class="dialog-buttons">
                    <div class="dialog-btn cancel" id="cancel-submit">取消</div>
                    <div class="dialog-btn confirm" id="confirm-submit">确认交卷</div>
                </div>
            </div>
        </div>

        <!-- 离开考试确认弹窗 -->
        <div class="exam-dialog" id="leave-dialog">
            <div class="dialog-content">
                <h3 class="dialog-title">确认离开考试</h3>
                <p class="dialog-message">离开后考试将自动交卷，确定要离开吗？</p>
                <div class="dialog-buttons">
                    <div class="dialog-btn cancel" id="cancel-leave">取消</div>
                    <div class="dialog-btn confirm" id="confirm-leave">确认离开</div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/common.js"></script>
    <script>
        // 考试计时器
        let examTime = 45 * 60; // 45分钟
        const timerElement = document.getElementById('exam-timer');
        
        function updateTimer() {
            const minutes = Math.floor(examTime / 60);
            const seconds = examTime % 60;
            timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            
            if (examTime <= 0) {
                // 时间到，自动交卷
                clearInterval(timerInterval);
                window.location.href = 'exam-result.html';
            } else {
                examTime--;
            }
        }
        
        const timerInterval = setInterval(updateTimer, 1000);
        
        // 选项点击
        document.querySelectorAll('.option-item').forEach(option => {
            option.addEventListener('click', function() {
                // 清除其他选项的选中状态
                document.querySelectorAll('.option-item').forEach(item => {
                    item.classList.remove('selected');
                });
                
                // 设置当前选项为选中状态
                this.classList.add('selected');
                
                // 更新导航中的状态
                document.querySelector('.nav-item.current').classList.add('answered');
            });
        });
        
        // 多选题选项点击
        document.querySelectorAll('.checkbox-item').forEach(option => {
            option.addEventListener('click', function() {
                // 切换当前选项的选中状态
                this.classList.toggle('selected');
                
                // 更新导航中的状态
                document.querySelector('.nav-item.current').classList.add('answered');
            });
        });
        
        // 标记题目
        const markBtn = document.getElementById('mark-btn');
        markBtn.addEventListener('click', function() {
            const currentNav = document.querySelector('.nav-item.current');
            
            if (currentNav.classList.contains('marked')) {
                currentNav.classList.remove('marked');
                this.innerHTML = '<i class="icon-mark"></i><span>标记题目</span>';
                this.classList.remove('marked');
            } else {
                currentNav.classList.add('marked');
                this.innerHTML = '<i class="icon-marked"></i><span>取消标记</span>';
                this.classList.add('marked');
            }
        });
        
        // 取消标记
        const unmarkBtn = document.getElementById('unmark-btn');
        if (unmarkBtn) {
            unmarkBtn.addEventListener('click', function() {
                const currentNav = document.querySelector('.nav-item.current');
                currentNav.classList.remove('marked');
                this.innerHTML = '<i class="icon-mark"></i><span>标记题目</span>';
                this.classList.remove('marked');
            });
        }
        
        // 题目导航点击
        document.querySelectorAll('.nav-item').forEach((item, index) => {
            item.addEventListener('click', function() {
                document.querySelector('.nav-item.current').classList.remove('current');
                this.classList.add('current');
                
                // 这里应该加载对应的题目
                // 简化处理，仅更新题号
                const questionNumber = document.querySelector('.question-number');
                questionNumber.textContent = `第${index + 1}题`;
            });
        });
        
        // 上一题/下一题按钮点击
        document.querySelector('.nav-btn:first-child').addEventListener('click', function() {
            const currentNav = document.querySelector('.nav-item.current');
            const prevNav = currentNav.previousElementSibling;
            
            if (prevNav) {
                currentNav.classList.remove('current');
                prevNav.classList.add('current');
                
                // 更新题号
                const questionNumber = document.querySelector('.question-number');
                const currentIndex = Array.from(document.querySelectorAll('.nav-item')).indexOf(prevNav);
                questionNumber.textContent = `第${currentIndex + 1}题`;
            }
        });
        
        document.getElementById('next-btn').addEventListener('click', function() {
            const currentNav = document.querySelector('.nav-item.current');
            const nextNav = currentNav.nextElementSibling;
            
            if (nextNav) {
                currentNav.classList.remove('current');
                nextNav.classList.add('current');
                
                // 更新题号
                const questionNumber = document.querySelector('.question-number');
                const currentIndex = Array.from(document.querySelectorAll('.nav-item')).indexOf(nextNav);
                questionNumber.textContent = `第${currentIndex + 1}题`;
            }
        });
        
        // 交卷按钮点击
        document.getElementById('submit-btn').addEventListener('click', function() {
            document.getElementById('submit-dialog').classList.add('active');
        });
        
        // 取消交卷
        document.getElementById('cancel-submit').addEventListener('click', function() {
            document.getElementById('submit-dialog').classList.remove('active');
        });
        
        // 确认交卷
        document.getElementById('confirm-submit').addEventListener('click', function() {
            window.location.href = 'exam-result.html';
        });
        
        // 返回按钮点击
        document.querySelector('.back-btn').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('leave-dialog').classList.add('active');
        });
        
        // 取消离开
        document.getElementById('cancel-leave').addEventListener('click', function() {
            document.getElementById('leave-dialog').classList.remove('active');
        });
        
        // 确认离开
        document.getElementById('confirm-leave').addEventListener('click', function() {
            window.location.href = 'question-bank.html';
        });
    </script>
</body>
</html> 